import React, { PureComponent } from 'react'
import { DetailWrapper, Header, Content } from './style'
import { connect } from 'react-redux'
import { actionCreators } from './store'
import { withRouter } from 'react-router-dom'
class Detail extends PureComponent {
  componentDidMount() {
    let matches = this.props.location.search.match(/\?(.*?)\=(.+?)&?/)
    let params = {}
    if (matches.length > 0) {
      let temp = matches.slice(1)
      for (let i = 0; i < temp.length; i += 2) {
        params[temp[i]] = temp[i + 1]
      }
    }
    this.props.getDetailData(params)
    // this.props.getDetailData(this.props.match.params.id)
  }
  render() {
    const { title, content } = this.props
    return (
      <DetailWrapper>
        <Header>{title}</Header>
        <Content
          dangerouslySetInnerHTML={{
            __html: content,
          }}
        />
      </DetailWrapper>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    title: state.getIn(['detail', 'title']),
    content: state.getIn(['detail', 'content']),
  }
}

const { getDetailData } = actionCreators
const mapDispatchToProps = { getDetailData }

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail))
